<template>
  <a-modal
    :open="visible"
    title="入住(客房)"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
    @update:open="(val) => emit('update:visible', val)"
  >
    <a-form :model="formData" :rules="rules" ref="formRef" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="房间号" name="roomNumber">
            <a-select
              v-model:value="formData.roomNumber"
              placeholder="请选择房间"
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="room in availableGuestRooms"
                :key="room.number"
                :value="room.number"
              >
                {{ room.number }} ({{ room.type }})
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="入住手牌" name="handCard">
            <a-input
              v-model:value="formData.handCard"
              placeholder="请输入入住手牌"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="入住人数" name="occupants">
            <a-input-number
              v-model:value="formData.occupants"
              :min="1"
              :max="10"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="入住天数" name="days">
            <a-input-number
              v-model:value="formData.days"
              :min="1"
              :max="30"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="客人姓名" name="guestName">
            <a-input
              v-model:value="formData.guestName"
              placeholder="请输入客人姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系电话" name="phone">
            <a-input
              v-model:value="formData.phone"
              placeholder="请输入联系电话"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="身份证号" name="idCard">
        <a-input v-model:value="formData.idCard" placeholder="请输入身份证号" />
      </a-form-item>

      <a-form-item label="入住备注" name="notes">
        <a-textarea
          v-model:value="formData.notes"
          placeholder="请输入入住备注"
          :rows="3"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';

interface Room {
  id: string;
  number: string;
  type: string;
  status: string;
  capacity: number;
  occupied: number;
}

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();
const formData = ref({
  roomNumber: '',
  handCard: '',
  occupants: 1,
  days: 1,
  guestName: '',
  phone: '',
  idCard: '',
  notes: '',
});

// 模拟可用客房数据
const availableGuestRooms = ref<Room[]>([
  {
    id: '1',
    number: '4001',
    type: '标准间',
    status: 'vacant',
    capacity: 2,
    occupied: 0,
  },
  {
    id: '2',
    number: '4002',
    type: '标准间',
    status: 'vacant',
    capacity: 2,
    occupied: 0,
  },
  {
    id: '3',
    number: '4003',
    type: '大床房',
    status: 'vacant',
    capacity: 2,
    occupied: 0,
  },
  {
    id: '4',
    number: '4004',
    type: '大床房',
    status: 'vacant',
    capacity: 2,
    occupied: 0,
  },
  {
    id: '5',
    number: '4005',
    type: '套房',
    status: 'vacant',
    capacity: 4,
    occupied: 0,
  },
]);

const rules = {
  roomNumber: [{ required: true, message: '请选择房间' }],
  handCard: [{ required: true, message: '请输入入住手牌' }],
  occupants: [{ required: true, message: '请输入入住人数' }],
  days: [{ required: true, message: '请输入入住天数' }],
  guestName: [{ required: true, message: '请输入客人姓名' }],
  phone: [{ required: true, message: '请输入联系电话' }],
  idCard: [{ required: true, message: '请输入身份证号' }],
};

const filterOption = (input: string, option: any) => {
  return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const handleOk = async () => {
  try {
    await formRef.value?.validate();

    // 这里调用入住API
    message.success('入住成功');
    emit('update:visible', false);
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>
